<template>
  <div class="data-visualization-view">
    <h1>数据可视化</h1>
    <div class="charts-container">
      <div class="chart" id="barChart"></div>
      <div class="chart" id="lineChart"></div>
      <div class="chart" id="pieChart"></div>
      <div class="chart" id="myChart"></div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted} from "vue";
import * as echarts from "echarts";
import {getVisualizationData} from "@/api/postbar";

export default defineComponent({
  name: "DataVisualizationView",
  setup() {
    const initCharts = async () => {
      try {
        const response = await getVisualizationData();
        const {bar_chart, line_chart, pie_chart} = response.data;

        // 初始化柱状图
        const barChart = echarts.init(document.getElementById("barChart")!);
        barChart.setOption({
          title: {text: "总数统计", left: "center"},
          tooltip: {},
          xAxis: {
            type: "category",
            data: ["帖子总数", "成员总数"],
          },
          yAxis: {type: "value"},
          series: [
            {
              data: [bar_chart.total_threads, bar_chart.total_members],
              type: "bar",
              itemStyle: {
                color: "#5470C6",
              },
            },
          ],
        });

        // 初始化折线图
        const lineChart = echarts.init(document.getElementById("lineChart")!);
        lineChart.setOption({
          title: {text: "前 10 名帖子数量的贴吧", left: "center"},
          tooltip: {trigger: "axis"},
          xAxis: {
            type: "category",
            data: line_chart.map((item: any) => item.forum_name),
          },
          yAxis: {type: "value", name: "帖子数量"},
          series: [
            {
              name: "帖子数量",
              data: line_chart.map((item: any) => item.thread_count),
              type: "line",
              smooth: true,
              lineStyle: {
                color: "#91CC75",
              },
              areaStyle: {
                color: "rgba(145, 204, 117, 0.2)",
              },
            },
          ],
        });


         const myChart = echarts.init(document.getElementById("myChart")!);
        myChart.setOption({
          title: {text: "前 10 名帖子数量的贴吧", left: "center"},
          tooltip: {trigger: "axis"},
          xAxis: {
            type: "category",
            data: line_chart.map((item: any) => item.forum_name),
          },
          yAxis: {type: "value", name: "帖子数量"},
          series: [
            {
              name: "帖子数量",
              data: line_chart.map((item: any) => item.thread_count),
              type: "bar",
              smooth: true,
              lineStyle: {
                color: "#91CC75",
              },
              areaStyle: {
                color: "rgba(145, 204, 117, 0.2)",
              },
            },
          ],
        });




        // 初始化饼图
        const pieChart = echarts.init(document.getElementById("pieChart")!);
        pieChart.setOption({
          title: {text: "贴吧帖子数量占比", left: "center"},
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          series: [
            {
              name: "帖子数量",
              type: "pie",
              radius: "50%",
              data: pie_chart,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        });
      } catch (error) {
        console.error("获取数据失败", error);
      }
    };

    onMounted(() => {
      initCharts();
    });

    return {};
  },
});
</script>

<style scoped>
.data-visualization-view {
  padding: 20px;
}

.charts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.chart {
  flex: 1 1 calc(33% - 30px); /* 三列布局 */
  height: 350px;
  width: 500px;
}
</style>
